import React, { useEffect, useState } from 'react'
import { usePlugins, useAmap } from '@amap/amap-react'
function useComponent(init: any, plugins: any, data: any[]) {
    const [component, set] = useState(null)
    const AMap = usePlugins(plugins)
    useEffect(() => {
        if (data && AMap) {
            const target = init(AMap, data)
            set(target)
            return () => {
                set(null)
            }
        }
    }, [data, AMap])
    return component
}
export const MassMark = (props: any) => {
    const { data } = props
    const map = useAmap()
    const massMark: any = useComponent(
        (AMap: any, data: any[]) =>
            new AMap.MassMarks(data, {
                opacity: 1,
                zIndex: 999,
                style: [
                    {
                        url: 'https://webapi.amap.com/images/mass/mass0.png',
                        anchor: new AMap.Pixel(6, 6),
                        size: new AMap.Size(11, 11),
                        zIndex: 3,
                    },
                    {
                        url: 'https://webapi.amap.com/images/mass/mass1.png',
                        anchor: new AMap.Pixel(6, 6),
                        size: new AMap.Size(11, 11),
                        zIndex: 2,
                    },
                    {
                        url: 'https://webapi.amap.com/images/mass/mass2.png',
                        anchor: new AMap.Pixel(6, 6),
                        size: new AMap.Size(11, 11),
                        zIndex: 1,
                    },
                ],
            }),
        'AMap.MassMarks',
        data,
    )
    useEffect(() => {
        if (massMark) {
            massMark.setMap(map)
            console.log('set massMark')
            return () => {
                try {
                    massMark.setMap(null)
                } catch (e) {}
            }
        }
    }, [massMark, data, map])
    return null
}
